const path = require('path');

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production', // development、production
  entry: {
    vendor: ['jquery', path.resolve(__dirname, './src/common.js')], // 多个页面都使用的组成一个， 比如 jquery，或者公共的库
    index: './src/index.js',
  },
  // output: 字符串，单入口方式，只能生成一个 chunk, 默认名称（filename可重命名），输出也只有一个 bundle
  // output: 是数组，多入口方式，也只能生成一个 chunk，默认名称（filename可重命名），输出也只有一个 bundle
  // output: 是对象，多入口方式，生成多个 chunk，输出名称（filename： [name].js），输出多个 bundle
  // output: 可以对象嵌套数组 {a: ['./src/one.js', './src/two.js'], b: './src/one.js'}
  output: {
    filename: '[name].[contenthash:8].js', // 打包的文件名
    path: path.resolve(__dirname, 'build'), // 打包存放的位置
  },
  // 模块 loader，webpack 只能识别 javascript 的资源， 所以需要 loader 翻译一些资源给 webpack 识别，比如 image，sass等
  module: {
    rules: [
      // css-loader: 处理 css 中的 @import和url的外部资源
      // style-loader: 生成 javascript 中会在运行时候，在 DOM 中的 head 中添加标签 style 中插入 css-loader 处理好的样式
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }

    ]
  },
  // 插件，可以配合loader完成更广泛的任务，也可以独立工作（打包优化，压缩，重新定义环境中的变量等）
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './index.html'), // 指定模板路径
      filename: 'main1.html', // 重命名
      chunks: ['vendor', 'index'], // 多入口的时候，指定打包输出的那些 chunk 需要引入, 与配置 entry 的 key 属性对应即可
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true,
      }
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './index.html'), // 指定模板路径
      filename: 'main2.html', // 重命名
      chunks: ['index'], // 多入口的时候，指定打包输出的那些 chunk 需要引入, 与配置 entry 的 key 属性对应即可
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true,
      }
    })
  ]
}